<template>
  <div class="box">
    <van-nav-bar
      title="消息"
      right-text="全部已读"
      left-arrow
      @click-left="onClickLeft"
      @click-right="toggleAllBadges"
    />
    <van-notice-bar style="width: 89%; margin: 5px" mode="closeable"
      >打开系统通知，H币入账等消息不错过</van-notice-bar
    >
    <div class="quxx">
      <div class="tzxx" @click="System">
        <div>
          <img
            style="width: 40px; height: 40px; margin: 5px; border-radius: 5px; float: left"
            src="../../assets/images/消息1.png"
            alt=""
          />
          <span style="color: #4fcb9f">系统消息</span>
        </div>
        <div class="vanbh" v-if="showSystemBadge">
          <van-badge :content="3" />
        </div>
      </div>
      <div class="tzxx" @click="Consultation">
        <div>
          <img
            style="width: 40px; height: 40px; margin: 5px; float: left"
            src="../../assets/images/消息2.png"
            alt=""
          />
          <span style="color: #f984a2">问诊消息</span>
        </div>
        <div class="vanbh" v-if="showConsultationBadge">
          <van-badge :content="7" />
        </div>
      </div>
      <div class="tzxx" @click="Hcoinreceipt">
        <div>
          <img
            style="width: 40px; height: 40px; margin: 5px; float: left"
            src="../../assets/images/消息3.png"
            alt=""
          />
          <span style="color: #ffab26">H币入账消息</span>
        </div>
        <div class="vanbh" v-if="showHcoinreceiptBadge">
          <van-badge :content="17" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
import { showToast, Badge, Button, NavBar, NoticeBar } from 'vant'
export default {
  components: {
    [Badge.name]: Badge,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [NoticeBar.name]: NoticeBar
  },
  data() {
    return {
      // 控制Badge显示与隐藏的数据属性
      showBadge: true
    }
  },
  setup() {
    const showSystemBadge = ref(true)
    const showConsultationBadge = ref(true)
    const showHcoinreceiptBadge = ref(true)

    const toggleAllBadges = () => {
      showSystemBadge.value = false
      showConsultationBadge.value = false
      showHcoinreceiptBadge.value = false
      showToast('全部已读')
    }

    const onClickLeft = () => history.back()

    return {
      showSystemBadge,
      showConsultationBadge,
      showHcoinreceiptBadge,
      toggleAllBadges,
      onClickLeft
      // 其他方法可以在这里定义，但在这个例子中不需要
    }
  },
  methods: {
    System() {
      this.$router.push('/system')
    },
    Consultation() {
      this.$router.push('/consultation')
    },
    Hcoinreceipt() {
      this.$router.push('/hcoinreceipt')
    },
    toggleBadge() {
      this.showBadge = !this.showBadge
      this.showWadge = !this.showWadge
      this.showHoast = !this.showHoast
    }
  }
}
</script>
<style scoped>
/* 修改左侧箭头颜色（如果存在的话，注意类名可能不同） */
::v-deep.van-nav-bar .van-icon {
  color: black;
}
::v-deep .van-nav-bar__text {
  color: black;
}
.quxx {
  width: 100%;
  height: 100%;
  background-color: white;
}
.tzxx {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
span {
  float: left;
  font-size: 14px;
  line-height: 50px;
}
.vanbh {
  margin-right: 10px;
  float: right;
}
</style>